<template>
	<view class="content">
		<view class="search">
			<image class="icon_search" src="@/static/teacher/search.png" mode="widthFix" />
			<input v-model="input" placeholder-class="input" type="text" placeholder="输入学员名字进行搜索" />
			<image @click="input = ''" v-if="input.length > 0" src="../../../static/user/close.png" mode="widthFix" />
		</view>
		<view class="c" :style="{ height: modelHeight + 'px' }">
			<view class="v"></view>
			<view class="dataList">
				<view class="item">张可欣</view>

				<view class="item">张猛</view>

				<view class="item">刘昊然</view>
			</view>
			<hint ref="hint"></hint>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			modelHeight: 0,
			scrollHeight: 0,
			input: '',
			isClose: false
		};
	},
	onReady() {
		this.$sys.getSystemInfo({ h5: true }).then(data => {
			this.$sys.getBoundingClientRect('.search').then(e => {
				this.modelHeight = data.screenHeight - e.height;
			});
		});
		this.$refs.hint.setStatus('noData');
	},
	methods: {}
};
</script>

<style lang="scss">
.search {
	height: 64rpx;
	background: #f2f3f5;
	border-radius: 32rpx;
	@extend .flex-space-between-center;
	padding: 0px $base-interval;
	flex-wrap: nowrap;
	justify-content: flex-start;

	image {
		flex-shrink: 0;
		width: 26rpx;
	}
	.icon_search {
		width: 30rpx;
	}
	input {
		flex-shrink: 1;
		width: 100%;
		padding: 0px $base-interval;
	}
	.input {
		color: $text-color-three;
	}
}
.c {
	overflow-y: auto;
	.v {
		height: $base-interval;
	}
}
.dataList {
	margin: 0px -1 * $base-interval 0px;
	padding: 0px $base-interval;
	border-top: 1rpx solid #e8e8e8;

	.item {
		line-height: 80rpx;
		color: $text-color-six;
		font-size: $font-size-base;
		border-bottom: 1rpx solid #e8e8e8;
	}
}
</style>
